<script lang="ts" setup>
import { ref, watch, reactive } from "vue";
//  普通使用
let num = ref(0);
let numWatch = ref(0);
const changeNum = () => {
  num.value++;
};
watch(
  num,
  (newValue, oldValue) => {
    numWatch.value += 2;
  },
  { immediate: true, deep: true }
);

//  监听多个值的变化
let n1 = ref(1);
let n2 = ref(2);
let n1n2Watch = ref("n1n2");
watch(
  [n1, n2],
  (newVlaue, oldValue) => {
    n1n2Watch.value += "new";
  },
  {
    immediate: true,
    deep: true,
  }
);
const changeN1 = (): void => {
  n1.value++;
};
const changeN2 = (): void => {
  n2.value++;
};

//  监听对象单一属性变化
let obj1 = reactive({
  name: "zhangsan",
  age: 18,
  hobbys: ["打游戏", "写代码"],
});
let obj2 = reactive({
  name: "李四",
  age: 20,
});
let count = ref(0);
watch(
  [() => obj1.age, obj2],
  () => {
    count.value++;
  },
  { deep: true ,immediate:true}
);
const changeObj1 = () => {
  console.log(111);

  obj1.age++;
};
const changeObj2 = () => {
  obj2.age++;
};
</script>
<template>
  <div>{{ num }} ==== {{ numWatch }}</div>
  <div>
    <button @click="changeNum()">修改num</button>
  </div>
  <div>{{ n1 }} =={{ n2 }}== {{ n1n2Watch }}</div>
  <div>
    <button @click="changeN1()">修改n1++</button>
    <button @click="changeN2()">修改n2++</button>
  </div>
  <div>{{ obj1 }} =={{ obj2 }}== {{ count }}</div>
  <div>
    <button @click="changeObj1()">修改n1++</button>
    <button @click="changeObj2()">修改n2++</button>
  </div>
</template>